<script>
import videoApi from "@/api/qiqq/video.js";

export default {
  name: "VideoComment",
  data() {
    return {
      commentsCount: 99,
      comment: "",
      showLoginDialog: false,
      videoCommentList: [],
      currentCommentId: "",
      commentUserName: "",
      replyUserId: "",
      currentCommentPage: 1,
      totalComments: 0,
      replyTxt: "",
      shortChoose: 0, // 默认按时间排序
    };
  },
  methods: {
    async addVideoComment() {
      const params = {
        videoId: this.$route.query.videoId,
        comment: this.comment,
        rootId: this.currentCommentId, // 根评论的 ID，如果是回复的话
        replyUserId: this.replyUserId, // 被回复的用户 ID
      };
      await videoApi.addVideoComment(params);
      this.comment = "";
      this.refreshVideoCommentComponent();
    },
    async addReplyComment(replyCommentId) {
      const params = {
        ...this.comment,
        rootId: replyCommentId,
        replyUserId: this.replyUserId,
      };
      await videoApi.addVideoComment(params);
      this.replyTxt = "";
      this.refreshVideoCommentComponent();
    },
    async getVideoComments($state) {
      const params = {
        vid: 1001,
        sortChoose: this.shortChoose,
        currentCommentPage: this.currentCommentPage,
      };
      try {
        videoApi.getVideoComments(params).then((response) => {
          console.log(response.list.length);
          if (response.list.length === 0) {
            $state.complete();
            return;
          }
          this.videoCommentList.push(...response.list);
          console.log(this.videoCommentList);
          this.commentsCount = response.total;
          this.currentCommentPage += 1;
          $state.loaded();
        });
      } catch (error) {
        console.error("获取评论失败:", error);
        $state.complete();
      }
    },
    recordCurrentClickedComment(commentId, commentUserName, replyUserId) {
      this.currentCommentId = commentId;
      this.commentUserName = commentUserName;
      this.replyUserId = replyUserId;
    },
    refreshVideoCommentComponent() {
      // 刷新评论区的逻辑
    },
    setSortType(sortType) {
      this.shortChoose = sortType;
      this.currentCommentPage = 1; // 重置页码
      this.videoCommentList = []; // 清空评论列表
      this.getVideoComments(); // 重新获取评论
    },
/*    getVideoComments($state) {
      const params = {
        vid: this.$route.query.videoId,
        sortChoose: this.shortChoose,
        currentCommentPage: this.currentCommentPage,
      };
      videoApi
        .getVideoComments(params)
        .then((response) => {
          const { comments, totalComments } = response.data;
          if (comments.length > 0) {
            this.videoCommentList.push(...comments);
            this.commentsCount = totalComments;
            this.currentCommentPage += 1;
            $state.loaded();
          } else {
            $state.complete();
          }
        })
        .catch((error) => {
          console.error("获取评论失败:", error);
          $state.complete(); // 发生错误时，告知 InfiniteLoading 组件加载完成
        });
    },*/
  },
/*  created() {
    this.getVideoComments();
  },*/
  filters: {
    // 添加 timeFormat 过滤器
    timeFormat(time) {
      return this.$dayjs(time).format("YYYY-MM-DD HH:mm:ss"); // 使用 dayjs 库格式化时间
    },
  },
  mounted() {
    const params = {
      vid: 1001,
      sortChoose: 0,
      currentCommentPage: 1,
    };
    videoApi.getVideoComments(params);
  },
};
</script>

<template>
  <div class="comment-container">
    <!-- 评论头部 -->
    <div class="comment-header">
      <div class="comment-header-title">
        评论
        <div class="comment-count">{{ commentsCount }}</div>
      </div>
      <div class="comment-header-sort">
        <div
          class="sort-button"
          :class="{ active: shortChoose === 1 }"
          @click="shortChoose = 1"
        >
          最热
        </div>
        <div class="part-symbol"></div>
        <div
          class="sort-button"
          :class="{ active: shortChoose === 0 }"
          @click="shortChoose = 0"
        >
          最新
        </div>
      </div>
    </div>
    <!-- 评论输入区域 -->
    <div v-if="isUserLoggedIn" class="comment-send-area">
      <div class="user-avatar">
        <img :src="avatar" alt="用户头像" />
      </div>
      <div class="comment-input">
        <textarea
          v-model="comment"
          placeholder="写下你的评论..."
          @keyup.enter="addVideoComment"
        ></textarea>
      </div>
      <div class="comment-button">
        <el-button type="primary" @click="addVideoComment">发布</el-button>
      </div>
    </div>
    <div v-else class="comment-need-login">请登录后发表评论</div>

    <!-- 评论列表 -->
    <div class="comment-list">
      <div
        v-for="rootComment in videoCommentList"
        :key="rootComment.id"
        class="comment-item"
      >
        <!-- 一级评论 -->
        <div class="root-reply-content-container">
          <div class="root-reply-avatar">
<!--            <img :src="rootComment.userInfo.avatar" alt="用户头像" />-->
          </div>
          <div class="root-reply-username">
<!--            {{ rootComment.userInfo.nick }}-->
            评论作者
          </div>
          <div class="root-reply-content-txt">
            {{ rootComment.content }}
          </div>
          <div class="root-reply-content-operation">
            <span class="reply-time">
              {{ rootComment.createTime | timeFormat }}
            </span>
            <el-button type="text" @click="likeComment(rootComment.id)">
              {{ rootComment.likeCount }} 赞
            </el-button>
          </div>
        </div>
        <!-- 回复区域 -->
        <div class="reply-area" v-if="currentCommentId === rootComment.id">
          <textarea
            v-model="replyTxt"
            placeholder="写下你的回复..."
            @keyup.enter="addReplyComment(rootComment.id)"
          ></textarea>
          <el-button type="primary" @click="addReplyComment(rootComment.id)">回复</el-button>
        </div>
        <!-- 子评论 -->
        <div
          v-for="childComment in rootComment.childList"
          :key="childComment.id"
          class="sub-reply-content-container"
        >
          <div class="sub-reply-avatar">
            <img :src="childComment.userInfo.avatar" alt="用户头像" />
          </div>
          <div class="sub-reply-username">
            {{ childComment.userInfo.nick }}
          </div>
          <div class="sub-reply-wrap">
            回复 {{ childComment.replyUserInfo.nick }}：
          </div>
          <div class="sub-reply-content-txt">
            {{ childComment.comment }}
          </div>
          <div class="sub-reply-content-operation">
            <span class="reply-time">
              {{ childComment.createTime | timeFormat }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="videoCommentList.length === 0" class="no-comments">
        暂无评论，快来抢沙发吧！
      </div>
      <infinite-loading
        :infinite-id="'videoCommentList'"
        @infinite="getVideoComments"
      >
        <!-- 组件将调用 getVideoComments 方法并传入 $state 参数 -->
      </infinite-loading>
    </div>
  </div>
</template>

<style scoped lang="less">
.comment-container {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  flex-direction: column;

  .comment-header {
    display: flex;

    .comment-header-title {
      display: flex;
      align-items: center;
      margin-right: 20px;
      font-size: 24px;
      font-weight: 500;
      .comment-count {
        font-size: 14px;
        margin: 0 36px 0 6px;
        font-weight: 400;
        color: #a8a6a6;
      }
    }

    .comment-header-sort {
      display: flex;
      align-items: center;

      .hot-sort {
        cursor: pointer;
      }

      .time-sort {
        cursor: pointer;
      }

      .part-symbol {
        height: 11px;
        margin: 0 12px;
        border-left: solid 1px;
      }
      .sort-button.active {
        color: red; /* 激活状态的按钮文字颜色 */
      }
    }
  }

  .comment-body {
    .comment-body-login {
      display: flex;
      flex-direction: column;

      .comment-send-area {
        display: flex;
        align-items: center;
        margin-top: 20px;

        .user-avatar {
          display: flex;
          flex: 1;
          img {
            height: 70px;
            width: 70px;
          }
        }

        .comment-input {
          flex: 6;
          height: 50px;
          .comment-input-textarea {
            height: 100%;
            width: 100%;
            border: none;
            border-radius: 6px;
            background-color: #e7e7e7;
            line-height: 38px;
            resize: none;
            outline: none;
          }
        }

        .comment-button {
          display: flex;
          justify-content: flex-end;
          flex: 1;
        }
      }

      .comment-root-reply-container {
        display: flex;
        margin-top: 20px;

        .root-reply-avatar {
          margin-right: 20px;
          img {
            height: 50px;
            width: 50px;
            border-radius: 2px;
          }
        }

        .total-reply-content-container {
          display: flex;
          flex-direction: column;

          .root-reply-content-container {
            display: flex;
            flex-direction: column;

            .root-reply-username {
              font-size: 14px;
              font-weight: 500;
              color: gray;
              margin-top: 10px;
              margin-bottom: 4px;
            }

            .root-reply-content {
              display: flex;
              flex-direction: column;

              .root-reply-content-txt {
                font-size: 16px;
              }

              .root-reply-content-operation {
                display: flex;
                align-items: center;
                font-size: 13px;
                color: gray;
                margin-top: 4px;
                .reply-time {
                  margin-right: 20px;
                }
                .reply-btn {
                  cursor: pointer;
                }
              }
            }
          }
          .sub-reply-content-container {
            display: flex;
            align-items: center;
            font-size: 14px;

            .sub-reply-userInfo {
              display: flex;
              align-items: center;

              .sub-reply-avatar {
                margin-right: 20px;
                img {
                  height: 40px;
                  width: 40px;
                  border-radius: 2px;
                }
              }
            }
            .sub-reply-content {
              display: flex;
              flex-direction: column;
              .sub-reply-username {
                font-size: 14px;
                font-weight: 500;
                color: gray;
                margin-top: 10px;
                margin-bottom: 4px;
              }
              .sub-reply-wrap {
                display: flex;
              }
              .sub-reply-content-operation {
                display: flex;
                align-items: center;
                font-size: 13px;
                color: gray;
                margin-top: 4px;
                .reply-time {
                  margin-right: 20px;
                }
                .reply-btn {
                  cursor: pointer;
                }
              }
            }
          }
          .reply-comment-area {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .reply-user-avatar {
              flex: 1;
              margin-right: 6px;
              img {
                height: 50px;
                width: 50px;
              }
            }

            .reply-comment-input {
              flex: 3;
              height: 40px;
              display: flex;
              align-items: center;
              margin-right: 6px;

              .comment-input-textarea {
                font-size: 14px;
                height: 100%;
                width: 100%;
                border: none;
                border-radius: 6px;
                background-color: #e7e7e7;
                line-height: 38px;
                resize: none;
                outline: none;
              }
            }

            .reply-comment-button {
              display: flex;
              justify-content: flex-end;
              flex: 1;
            }
          }
        }
      }
    }

    .comment-body-before-login {
      display: flex;
      flex-direction: column;

      .comment-send-area-before-login {
        display: flex;
        align-items: center;
        margin-top: 20px;

        .user-avatar-before-login {
          flex: 1;
          display: flex;
          align-items: center;
          img {
            height: 70px;
            width: 70px;
          }
        }
        .comment-input-before-login {
          flex: 6;
          height: 50px;
          .comment-input-textarea {
            height: 100%;
            width: 100%;
            border: none;
            border-radius: 6px;
            background-color: #e7e7e7;
            line-height: 38px;
            resize: none;
            outline: none;
          }
        }

        .comment-button-before-login {
          display: flex;
          justify-content: flex-end;
          flex: 1;
        }
      }
    }
  }
}
</style>
